<template>
  <div class="cxcsIndex">
    <userHeader />
    <div class="breadClum">
      <span>
           <router-link :to="{path:'/pageIndex'}"> <a class="bread1">当前位置：首页  >  </a></router-link>
           <router-link :to="{path:'/query'}"><a class="bread2">综合查询  ></a></router-link>
         <a class="bread2">穿行测试底稿</a>
      </span>
    </div>
    <div class="navList">
      <div class="sp1">
        <span @click.stop="choiseTyoe">评价企业</span>
        <ul class="hideUl" v-if="hideUl">
          <li @click.stop="selectType(item.name)" v-for="(item,index) in selectTypeArray" :key="index">
            <span>{{item.name}}</span>
          </li>
        </ul>
      </div>
      <div class="sp1">
        <span @click.stop="choiseTyoe">评价期间</span>
        <ul class="hideUl" v-if="hideUl">
          <li @click.stop="selectType(item.name)" v-for="(item,index) in selectTypeArray" :key="index">
            <span>{{item.name}}</span>
          </li>
        </ul>
      </div>

    </div>
    <fixed />
    <el-table :data="tableData">
      <el-table-column
        prop="ID"
        label="ID"
        width="142"
      >
      </el-table-column>
      <el-table-column
        prop="item"
        label="评价项目"
        width="200"
      >
      </el-table-column>
      <el-table-column
        prop="content"
        label="评价内容"
        width="200"
      >
      </el-table-column>

      <el-table-column
        prop="checkRecord"
        label="资料名称"
      >
      </el-table-column>

      <el-table-column
        prop="checkTime"
        label="资料时间要求"
      >
      </el-table-column>
      <el-table-column
        prop="checkPlace"
        label="资料类型"
      >
      </el-table-column>
      <el-table-column
        prop="shortcoming"
        label="提供部门"
      >
      </el-table-column>
      <el-table-column
        prop="shortcoming"
        label="提供标识"
      >
      </el-table-column>
      <el-table-column
        prop="shortcoming"
        label="未提供原因"
      >
      </el-table-column>

      <el-table-column
      >
      </el-table-column>

    </el-table>
  </div>
</template>
<script>
  import fixed from '@/components/fixed.vue'
  import userHeader from '@/components/header.vue'
  export default({
    computed:{
      color(){
        return function (data) {
          if(data>=100){
            return '#8cc34b'
          }else if(data<100&&data>=60){
            return '#f0b914'
          }else if(data<60&&data>50){
            return '#f66c6c'
          }else {
            return '#b00606'
          }
        }
      }
    },
    data(){
      return {
        categyType:"评价企业",
        hideUl:false,
        selectTypeArray:[
          {
            id:0,
            name:'1'
          },
          {
            id:1,
            name:'2'
          },
          {
            id:2,
            name:'3'
          }
        ],
        tableData:[
          {
            ID:'1001',
            content:"2222",
            progress:{
              p1:true,
              p2: true,
              p3: true,
              p4: false,
              p5: {
                deadLine:'2018年12月31日'
              },
              p6:{
                data:90
              }
            }
          },
          {
            ID:'1001',
            content:"2222",
            progress:{
              p1:true,
              p2: false,
              p3: true,
              p4: false,
              p5: {
                deadLine:'2018年12月31日'
              },
              p6:{
                data:30
              }
            }
          },
          {
            ID:'1004',
            content:"2222",
            progress:{
              p1:true,
              p2: false,
              p3: true,
              p4: false,
              p5: {
                deadLine:'2018年12月31日'
              },
              p6:{
                data:100
              }
            }
          },
          {
            ID:'1003',
            content:"2222",
            progress:{
              p1:true,
              p2: false,
              p3: true,
              p4: false,
              p5: {
                deadLine:'2018年12月31日'
              },
              p6:{
                data:55
              }
            }
          }
        ]
      }
    },
    components:{
      userHeader,
      fixed,
    },
    methods:{
    },
    mounted(){
//        this.tableData.forEach((item,index)=>{
//              if(item.progress.p6.data>=100){
//                  this.color='#f00'
//              }else if(item.progress.p6.data<100&&item.progress.p6.data>=60){
//                 this.color='green'
//              }else if(item.progress.p6.data<60&&item.progress.p6.data>50){
//                  this.color='red'
//              }else {
//                this.color='darkRed'
//              }
//        })
    }
  })
</script>
<style scoped="">
  .cxcsIndex{
    width: 100%;
    height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
  }
.cxcsIndex  .companyListIndex .container{
    overflow: hidden;
    margin-top: 20px;
    margin-bottom: 10px;
  }
.cxcsIndex .companyListIndex ul{
    float: right;
    overflow: hidden;
  }
.cxcsIndex .companyListIndex ul li{
    float: left;
    margin-right: 20px;
  }
.cxcsIndex .companyListIndex ul li  span.nums{
    color: #333;
    display: inline-block;
    padding: 4px 0px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    width: 50px;
    text-align: center;


  }
.cxcsIndex .companyListIndex ul li  span.green{
    background: #8cc34b;
    color: white;
  }
.cxcsIndex  .companyListIndex ul li  span.yellow{
    background: #f0b914;
    color: white;
  }
.cxcsIndex .companyListIndex ul li  span.dangerRed{
    background: #f66c6c;
    color: white;
  }
.cxcsIndex  .navList .sp1 span{
    position: relative;
  }
.cxcsIndex  .navList .sp1>span:after{
    position: absolute;
    right: -10px;
    top:50%;
    width:8px;
    height: 5px;
    margin-top: -3px;
    content:'';
    background-image: url("../../static/images/icon-down.png");
    background-repeat: no-repeat;
    background-position: center;

  }
.cxcsIndex  .navList .sp1 .hideUl{
    position: absolute;
    left: 0;
    top: 46px;
    width: 160px;
    z-index: 999;
    background: white;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    padding-top: 6px;

  }
.cxcsIndex .navList .sp1 .hideUl li{
    height: 34px;
    font-size: 14px;
    line-height: 34px;
    color: #000;
    text-align: center;
  }
.cxcsIndex  .navList .sp1 .hideUl li:nth-child(1){
    background: #f2f5fc;
  }
.cxcsIndex  .navList .sp1 .hideUl li:nth-child(1) span{
    color: #7d9bcf;
  }
.cxcsIndex  .navList .sp1 .hideUl li:last-child span{
    color: #fff;
  }
.cxcsIndex  .navList .sp1 .hideUl li:last-child{
    background: #769dd6;
  }
  .cxcsIndex  >>>  .el-table thead th{
    background: #d3e9bb;
  }
  .cxcsIndex  >>> .el-table thead {
    color: #5d9120;
    text-align: center;
  }
  .cxcsIndex  >>> .el-table  .cell{
    text-align: center;
  }
  .cxcsIndex  >>>  .el-table td, .el-table th.is-leaf{
    border-bottom: 1px solid #aac983;
  }
  .cxcsIndex  >>>  .el-table .el-table--border, .el-table--group{
    border: 1px solid #aac983;
  }
  .cxcsIndex  >>> .el-table td, .cxcsIndex  >>> .el-table th.is-leaf{
    border-bottom: 1px solid #aac983;
    border-right: 1px solid #aac983;
  }
  .cxcsIndex  >>> .el-table--border th,  .cxcsIndex  .el-table__fixed-right-patch{
    border-bottom:1px solid #aac983;
  }
  .cxcsIndex  >>> .el-table--border td, .cxcsIndex  >>> .el-table--border th, .cxcsIndex  >>> .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{
    border-right: 1px solid #aac983;
  }

  .cxcsIndex  >>> .el-table__body  .el-table__row td .cell .s1 .el-checkbox__inner,
  .cxcsIndex  >>> .el-table__body  .el-table__row td .cell .s2 .el-checkbox__inner{
    width: 14px;
    height: 14px;
  }
  .cxcsIndex  >>> .el-table__body  .el-table__row td .cell .s2{
    margin-left: 0 !important;
  }
  .cxcsIndex  >>> .el-table__body .el-checkbox__inner::after{
    left: 3px;
    width: 4px;
    height: 6px;
    -webkit-transform: rotate(45deg) scaleY(1);
    transform: rotate(45deg) scaleY(1);
  }
  .cxcsIndex  >>> .el-table__body  .el-checkbox__input .el-checkbox__inner{
    background: #d5d5d5;
    border-color: #d5d5d5;
  }
  .cxcsIndex  >>> .el-table__body  .el-checkbox__input.is-checked .el-checkbox__inner,
  .cxcsIndex  >>> .el-table__body  .el-checkbox__input.is-indeterminate .el-checkbox__inner{
    background: #8bc34a;
    border-color: #8bc34a;
  }
  .cxcsIndex  >>> .el-table__body   .el-checkbox__inner:hover{
    border-color: #d5d5d5;
  }
  .cxcsIndex  >>> .el-progress-bar__inner{
    text-align: center;
  }
  @media screen and (max-width: 1400px) {
    .cxcsIndex{
      padding: 6px;
    }
  }
</style>

